<template>
  <el-button @click="screenshot">截图</el-button><br />
  <img
    src="../../../public/R-C.jpg"
    style="width:1200px;height:300px"
  />
</template>

<script setup>
import { init, setNode, clear } from "@/home/common.js";
import * as htmlToImage from "html-to-image";

let dom = null;

let url;
let screenshotDom;
let width;
let height;

const screenshot = () => {
  width = window.innerWidth;
  height = window.innerHeight;

  // ******************** 第一步: 将当前视口转换成图片 ********************
  htmlToImage
    .toPng(document.body, {
      width,
      height,
    })
    .then(function (imgUrl) {
      url = imgUrl;

      // ******************** 第二步：创建 canvas 画布，并将画布铺满整个屏幕，初始化 ********************
      createCanvasDom(width, height);

      // ******************** 第三步: 添加一层蒙版 ********************
      // 创建蒙板
      dom.addNode({
        id: "mask",
        type: "rect",
        level: 2,
        x: 0,
        y: 0,
        width,
        height,
        unClick: true, // 禁止选中
        fillType: "fill",
        fillColor: "rgba(0,0,0,0.8)",
      });

      // ******************** 第四步：添加矩形的绘制状态，并且添加对绘制完成的监听，将框选的区域信息保存下来 ********************
      let customProps = {
        id: "customCanvas",
        zoom: true,
        level: 3,
        drag: true,
        fillType: "fill",
        fillColor: "rgba(255, 255, 255, 1)",
        unLight: true, // 禁止高亮
      };
      let auxProps = {
        globalCompositeOperation: "xor",
      };
      setNode("rect", customProps, auxProps); // 添加矩形绘制状态
      document.addEventListener("keyup", listener); // 添加绘制完成的监听
    });
};

const listener = function (val) {
  if (val.code === "Enter") {
    document.removeEventListener("keyup", listener);
    // 记录框选的节点信息
    let node = dom.getNode("customCanvas");

    // ******************** 第五步: 将第一步的图片放到画布中 ********************
    clear();
    // 添加当前浏览器视口的截图（来自于 第一步 的图片）
    dom
      .addNode({
        type: "image",
        unClick: true,
        level: 1,
        x: 0,
        y: 0,
        width: width,
        height: height,
        src: url,
      })
      .then(() => {
        // ******************** 第六步: 获取画布中特定区域的信息，再将此区域重新绘制在一张新的画布中，最后导出这张新画布 ********************
        // 截取画布中的某一区域
        let screenshotUrl = dom.ctx.getImageData(
          node.x,
          node.y,
          node.width,
          node.height
        );
        overState();
        // 将此区域重新绘制在一张新画布上
        createCanvasDom(node.width, node.height);
        dom.ctx.putImageData(screenshotUrl, 0, 0);
        let target = screenshotDom.toDataURL(); // 输出 url
        console.log("target", target);
        overState(); // 结束绘制状态
      });
  }
};

// 创建画布
const createCanvasDom = (w, h) => {
  screenshotDom = document.createElement("canvas");
  document.body.appendChild(screenshotDom);
  screenshotDom.style.position = "absolute";
  screenshotDom.style.left = "0px";
  screenshotDom.style.top = "0px";
  dom = init(
    {
      width: w,
      height: h,
      defaultStyle: {
        zoomColor: "red",
        zoomWidth: 3,
      },
    },
    screenshotDom
  );
};
// 结束渲染状态
const overState = () => {
  dom = null;
  document.body.removeChild(screenshotDom);
  screenshotDom = null;
  // console.log("screenshotDom", screenshotDom);
};
</script>

<style>
</style>